<template>
	<div id="userList">
		<!-------用户列表-------->
		<div class="detail_2">
			<ul class="detail_2_title">
				<li @click="taskState1 = '11,12,13,14,15,16,17,18,20,21,30,35'" :class="taskState1 == '11,12,13,14,15,16,17,18,20,21,30,35'?'state_active':''">已通过申请</li>
				<span>|</span>
				<li @click="taskState1 = '11,12,13,18'" :class="taskState1 == '11,12,13,18'?'state_active':''">待填订单号</li>
				<li @click="taskState1 = '14,15,16,17'" :class="taskState1 == '14,15,16,17'?'state_active':''">待提交报告</li>
				<li @click="taskState1 = '20'" :class="taskState1 == '20'?'state_active':''">报告待确认</li>
				<li @click="taskState1 = '30,35'" :class="taskState1 == '30,35'?'state_active':''">待修改订单/报告</li>
				<li @click="taskState1 = '10'" :class="taskState1 == '10'?'state_active':''">已取消资格</li>
				<li @click="taskState1 = '21'" :class="taskState1 == '21'?'state_active':''">返款完成</li>
			</ul>
			<div class="detail_2_content">
				<div class="user_title">
					<p>用户昵称</p>
					<p>下单账号</p>
					<p>搜索途径</p>
					<p>申请时间</p>
					<p>连续操作天数</p>
					<p>订单号</p>
					<p>状态</p>
					<p>操作</p>
				</div>
				<div v-for="item in userList" class="user_item">
					<div class="user_content">
						<p>{{item.taskSchedule.userName}}</p>
						<p>{{item.taskSchedule.accountName}}</p>
						<p>{{getIntoType(item.taskSchedule.intoType)}}</p>
						<p>{{getDate(item.taskSchedule.createtime)}}</p>
						<p>{{item.operaDay}}</p>
						<p v-text="item.taskSchedule.orderNum?item.taskSchedule.orderNum:'待提交'"></p>
						<!--------状态----------->
						<p>{{getOpera(item.taskSchedule.operaStatus)}}</p>
						<!-----操作---------->
						<p v-if="item.taskSchedule.operaStatus ==10">--</p>
						<router-link :to="{path:'/agent/detail/userDetail',query:{scheduleId:item.taskSchedule.id,operaDay:item.operaDay,taskId:taskId}}" exact v-else>查看详情</router-link>
					</div>
					<div v-show="item.taskSchedule.operaStatus == 10" class="why">取消原因：{{item.taskSchedule.cancelReason}}</div>
				</div>
				<el-pagination v-if="userList.length>0"
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
				</el-pagination>
				<!----------没有数据了------------>
				<div v-else class="noData">
					<img src="../../static/img/nodata.png"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:'userList',
	data:function(){
		return{
			userName:'',//用户名
			orderNum:'',//订单号
			taskId:'',//活动Id
			taskState1: '11,12,13,14,15,16,17,18,20,21,30,35',//订单状态-筛选
			total: 0,//总条数
			pageSize: 8,//每页条数
			currentPage: 1,//当前页码
			userList: [
				{
					taskSchedule:{
						userName: '艾瑞莉娅',//用户名-显示
					},
					platformName: '我的淘宝账号',//下单账号
					way: '手淘搜索',//搜索途径
					applyTime: '2018-01-01 06:05:30',//申请时间
					dayNum: 3,//连续操作天数
					orderNum: 'jslkdgoisd',//订单号-显示
					taskState: 1,//订单状态-显示
				},
				{
					taskSchedule:{
						userName: '艾瑞莉娅',//用户名-显示
					},
					platformName: '我的淘宝账号',//下单账号
					way: '手淘搜索',//搜索途径
					applyTime: '2018-01-01 06:05:30',//申请时间
					dayNum: 3,//连续操作天数
					orderNum: 'sdfa52564564',//订单号-显示
					taskState: 2,//订单状态-显示
				},
			],
		}
	},
	methods:{
		
		showScheduleList: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	startPage:_this.currentPage,
	        	pageSize:_this.pageSize,
	        	statusList:_this.taskState1,
	        	taskId:_this.taskId,
	        	userName:_this.userName,
	        	orderNum:_this.orderNum
	        })
			_this.$axios.post('/agent/task/scheduleList',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	_this.userList = data.result;
			    }else{
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		countScheduleList: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	statusList:_this.taskState1,
	        	taskId:_this.taskId,
	        	userName:_this.userName,
	        	orderNum:_this.orderNum
	        })
			_this.$axios.post('/agent/task/countScheduleList',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	_this.total = data.result;
			    }else{
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		getOpera:function(obj){
			if(obj==11 || obj==12 || obj==13 || obj==18){
				return "待填订单号";
			}else if(obj==14 || obj==15){
				return "待提交报告";
			}else if(obj==16 || obj==17){
				return "待提交追评";
			}else if(obj==20){
				return "报告待确认";
			}else if(obj==30){
				return "待修改订单";
			}else if(obj==35){
				return "待修改报告";
			}else if(obj==10){
				return "已取消资格";
			}else if(obj==21){
				return "返款完成";
			}
		},
		getIntoType:function(obj){
			if(obj==1){
				return "关键词";
			}else if(obj==2){
				return "淘口令";
			}else if(obj==3){
				return "二维码";
			}
		},
		//-----------分页页码改变------------
	    handleCurrentChange:function(val) {
	        this.currentPage=val;
	        this.showScheduleList();
	    },
	    //--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		}
	},
	created:function(){
		this.taskId = this.$route.query.taskId;
		this.orderNum = this.$route.query.orderNum;
		this.userName = this.$route.query.userName;
		this.showScheduleList();
		this.countScheduleList();
	},
	watch:{
		taskState1(){
			this.currnetPage=1;
			this.showScheduleList();
			this.countScheduleList();
		},
		'$route'(){
			//----------上个页面传过来的订单号------------
			this.currnetPage=1;
			this.orderNum = this.$route.query.orderNum;
			this.userName = this.$route.query.userName;
			this.showScheduleList();
			this.countScheduleList();
		}
		
	}
}
</script>
<style>
/*-----------分页器样式------------*/
.el-pagination{
	text-align: center;
	margin-top: 20px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #FF464E;
}
.el-pagination.is-background .el-pager li:not(.active):hover{
	color: #FF464E;
}
</style>
<style scoped>
/*--------用户列表------------*/
.detail_2_title{
	display: flex;
	margin-top: 15px;
}
.detail_2_title li{
	margin: 0 10px;
	color: #545454;
	cursor: pointer;
}
.detail_2_title li.state_active{
	color: #FF464E;
}
.detail_2_content{
	margin-top: 15px;
}
.user_title{
	display: flex;
	background-color: #F5F5F5;
	padding: 10px 0;
}
.user_title p{
	width: 12%;
	text-align: center;
	color: #545454;
}
.user_title p:nth-child(4){
	width: 16%;
}
.user_item{
	border-bottom: 1px solid #E6E6E6;
}
.user_item .user_content{
	display: flex;
	padding: 10px 0;
}
.user_item p{
	width: 12%;
	text-align: center;
	color: #808080;
}
.user_item p:nth-child(4){
	width: 16%;
}
.user_item a{
	width: 12%;
	color: #FF464E;
	cursor: pointer;
	text-align: center;
}
.why{
    background-color: #FFEEEE;
    color: #FF464E;
    border: 1px solid #FF464E;
    width: auto;
    text-align: center;
    height: 22px;
    line-height: 22px;
    margin-left: 30px;
    margin-bottom: 10px;
    display: inline-block;
    padding: 1px 5px;
}
/*-------没数据了----------*/
.noData img{
	width: 30%;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
}
</style>